<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监视属性</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>


    <div id="root">
        <P>今天下去很{{info}}</P>
        <button @click="changeState">切换天气</button>



    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                total: true,
                numbers: {
                    a: 1,
                    b: 2

                }
            },
            computed: {
                info: function() {
                    return this.total ? "炎热" : "晾爽"
                }
            },
            methods: {
                changeState() {
                    //  console.log(this)
                    this.total = !this.total
                },

            },

            watch: {
                //正常写法
                // total: {
                //     immediate: true, //初始化时让handler调用一下
                //     deep: true, //开启深度监视
                //     handler(newValue, oldValue) {
                //         console.log("numbers.被改变了")
                //     }
                // },
                //简写形式（是在配置项只有一个hander的时候）可以简写
                // total(newValue, oldValue) { //nummer是number函数的返回值
                //     console.log("total.被改变了~~~")
                // },

            }

        })


        //监视属性的第二种写法:
        // vm.$watch('total', {
        //     immediate: true, //页面加载初始化时让hander调用一下（可以不加）
        //     //handler()当监视的属性发生改变时调用
        //     //handler(newValue，oldValue)有两个参数，newValue，属性被改变新的值，oldValue属性改变旧的值
        //     handler(newValue, oldValue) {
        //         console.log("total被修改了")
        //         console.log(newValue)
        //         console.log(oldValue)
        //     }
        // })

        //简写形式(是在配置项只有一个hander的时候可以简写)
        vm.$watch('total', function(newValue, oldValue) {
            console.log("total被修改了")
            console.log(newValue)
            console.log(oldValue)

        })
    </script>


</body>

</html